<template>
    <div>
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">热门活动</div>
            <div @click="goBack" slot="overwrite-left" class="common__header--img"><img slot="icon" src="../assets/confirm/goback.png"></div>
            <div slot="right">
                <img slot="icon" src="../assets/serch.png">
            </div>
        </x-header>
        <group>
            <cell link="/income" is-link>
                <span class="my__list--title" slot="after-title">当前定位</span>
                <img slot="icon" width="20" style="display:block;margin-right:5px;" src="../assets/address.png">
                <div class="badge-value" slot>
                    <span class="vertical-middle my__list--right"> 11</span>
                </div>
            </cell>
        </group>
        <input type="text" ref="searchText" id="searchText" @keyup="keyUpSearch" placeholder="请输入地址" />
        <div id="temp"></div>
        <p @click="getCurrentPosition">获取 当前地址</p>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { PopState } from 'src/common/const';
import { XHeader, Tab, TabItem, Group, Card, Cell } from 'vux';
export default {
    components: { XHeader, Tab, TabItem, Group, Card, Cell },
    computed: mapState({
        isWeChar: "isWeChar"
    }),
    data() {
        return {

        }
    },
    methods: {
        ...mapActions(['updatedPopState']),
        keyUpSearch() {
            var _this = this;
            var txt = this.$refs.searchText.value;
            AMap.service(["AMap.PlaceSearch"], function () {
                var placeSearch = new AMap.PlaceSearch({ //构造地点查询类 
                    pageSize: 12, pageIndex: 1, city: "重庆", //城市 
                    cityLimit: 'true', panel: 'temp'//搜索结果的展示面板对元素id，不知道为什么一定要有该参数，最终获取的结果才更完整，参数更多跟完整，
                    //所以我在页面随便写了一个<div id="temp" style="display:none"></div>
                });
                //关键字查询
                placeSearch.search(txt, function (status, result) {
                    if (status == 'complete' && result.info == 'OK') {
                        //这里可以console.log(result)，查看所有返回的参数，遍历展示这些基本的，我就不赘述
                        console.log(result);
                    }
                })
            })
        },
        onComplete(data) {
            console.log(data);
        },
        getCurrentPosition() {
            let _this = this;
            console.log(AMap);
            AMap.service(["AMap.PlaceSearch"], function () {
                var geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true,//是否使用高精度定位，默认:true
                    timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                    maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                    convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                    showButton: true,        //显示定位按钮，默认：true
                    buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
                    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                    showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                    showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                    panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                    zoomToAccuracy: true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                });
                // mapObj.addControl(geolocation);
                geolocation.getCurrentPosition();
                AMap.event.addListener(geolocation, 'complete', _this.onComplete);//返回定位信息
                AMap.event.addListener(geolocation, 'error', _this.onComplete);      //返回定位出错信息
            })
        },
        goBack() {
            this.updatedPopState(PopState.VUX_POP_OUT);
            Common.goBack();
        }
    },
    mounted() {
        document.title = "map";
    }

}
</script>

<style>

</style>